<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("./1.jpg") no-repeat;
        }

        .box {
            text-align: center;
            padding: 50px 0;
            background: rgba(255, 255, 255, .3);
        }

        .box img {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./1.jpg" alt="背景图片" width='150px'>
        <img src="./2.jpg" alt="背景图片" width='150px'>
        <img src="./3.jpg" alt="背景图片" width='150px'>
        <img src="./4.jpg" alt="背景图片" width='150px'>
        <img src="./5.jpg" alt="背景图片" width='150px'>
    </div>
</body>
<script>
    var img = document.getElementsByTagName('img');
    for(let i = 0;i<img.length;i++){
        img[i].onclick = function(){
            document.body.style.background = 'url(./'+(i+1)+'.jpg)';
        }
        // console.log(i);
    }


    //es6
    // console.log(img);
    // img.forEach((item,index)=>{
    //     console.log(index);
    // })
    // img.forEach( (item,index) => {
    //     item.onclick = function(){
    //         document.body.style.background = 'url(./'+(index+1)+'.jpg)';
    //     }
    // });
    
</script>
</html>